<template>
  <view class="probuy-page">
    <!-- 搜索栏 -->
    <!-- <view class="search-bar">
      <myInput v-model="searchTxt" @search="handleSearch" />
    </view> -->

    <!-- 分类标签 -->
    <view class="category-tabs">
      <view class="product-grid">
        <view class="product-item" v-for="item in products" :key="item.id">
          <view class="product-info">
            <view class="poc">
              <text class="product-title">￥{{ item.amount }}</text>
              <text class="price1">{{ item.accountType }}券</text>
            </view>

            <view class="price-row">
              <text class="price">{{
                formatTimestamp(item.create_time)
              }}</text>
            </view>
          </view>
          <view class="price-pay">
            <nut-button @tap="toPay(item.id)" size="small">去支付</nut-button>
            <text class="ids">订单：{{ item.id }}</text>
          </view>
        </view>
      </view>
    </view>

    <view v-if="showPayPopup">
      <pay :orderId="orderId" @cancel="showPayPopup = false" @confirm="payConfirm" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import Taro from "@tarojs/taro";
import pic from "@/assets/imgs/photo.svg";
// const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
import myInput from "@/components/my-input/index.vue";
import http from "@/utils/http";
import { formatTimestamp } from "@/utils/tooler";
import pay from "./component/pay.vue";

const orderId = ref("");
const showPayPopup = ref(false);

Taro.setNavigationBarTitle({
  title: "待付款",
});

const searchTxt = ref("");
const cates = ref([
  // {
  //   id: 0,
  //   name: "全部",
  // },
  {
    id: 1,
    name: "待付款",
  },
  {
    id: 2,
    name: "待核销",
  },
  {
    id: 3,
    name: "已完成",
  },
]);

const toPay = (id: any) => {
  orderId.value = id;
  showPayPopup.value = true;
};

const payConfirm = (param: any) => {
  console.log("支付参数", param);
  showPayPopup.value = false;
  http
    .postQuery("/api/userOrder/confirmPay", {
      id: orderId.value,
    })
    .then((res) => {
      console.log("提交订单 === ", res);
      if (res.code == 0) {
        Taro.showToast({
          title: "提交成功",
          icon: "success",
        });

        Taro.switchTab({
          url: `/pages/my/index`,
        });
      } else {
        Taro.showToast({
          title: res.data,
          icon: "error",
        });
      }
    });
};

onMounted(() => {
  console.log("searchTxt", searchTxt.value);
  // http.postQuery(`/api/merchant/getOrder`, {}).then((res) => {
  //   console.log("res", res);
  // });

  reset();
});

const params = Taro.getCurrentInstance().router?.params;

function reset() {
  if (params?.business) {
    http.postQuery(`/api/merchant/getOrder`, { type: 2 }).then((res) => {
      console.log("res ==== 订单列表", res);
      products.value = res.data.map((i) => i.columns);
    });
  } else {
    http.postQuery(`/api/userOrder/getOrder`, { status: 0 }).then((res) => {
      console.log("res ==== 订单列表", res);
      products.value = res.data.map((i) => i.columns);
    });
  }
}
function handleSearch() {
  console.log("searchTxt", searchTxt.value);
}

interface Product {
  id: number;
  name: string;
  desc: string;
  price: number;
  sold: number;
  image: string;
}

const activeTab = ref(1);
const products = ref<Product[]>(
  [1, 2, 3, 4, 5, 6, 7, 8].map((i) => {
    return {
      id: i,
      name: `醉义堂20年窖藏酒商品${i}`,
      desc: `商品${i}的描述纯粮酿醉义堂20年窖藏酒醉义堂20年窖藏酒香型白酒`,
      price: Math.floor(Math.random() * 1000),
      sold: Math.floor(Math.random() * 1000),
      image: pic,
    };
  })
);

function goToDetail(id: number) {
  Taro.navigateTo({
    url: `/pages-detail/order/detail?id=${id}`,
  });
}
</script>

<style lang="scss">
.probuy-page {
  padding-bottom: 200rpx;
  background-color: #f5f5f5;

  .ids{
    font-size: 20rpx;
    color: #999;
    // background: #333;
    // padding: 4rpx 8rpx;
    // margin-left: 8rpx;
  }
  .price-pay{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8rpx;
  }
  .search-bar {
    padding: 20rpx;
    background-color: #fff;
  }

  .category-tabs {
    background-color: #fff;
    margin-bottom: 20rpx;
  }

  .product-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10rpx;
    box-sizing: border-box;

    .product-item {
      width: 100%;
      padding: 10rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: solid 1px #eee;

      .product-image {
        width: 100%;
        height: 350rpx;
        border-radius: 16rpx 16rpx 0 0;
      }

      .product-info {
        background-color: #fff;
        padding: 20rpx;
        border-radius: 0 0 16rpx 16rpx;

        .poc {
          display: flex;
          align-items: center;
          gap: 10rpx;
        }

        .product-title {
          font-size: 32rpx;
          font-weight: 500;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          line-height: 40rpx;
        }

        .price1 {
          color: #fc761c;
          font-size: 20rpx;
          border: 1rpx solid #fc761c;
          padding: 6rpx 12rpx;
          border-radius: 4rpx;
        }

        .product-desc {
          font-size: 24rpx;
          color: #999;
          margin: 10rpx 0;
          display: block;
          line-height: 34rpx;
        }

        .price-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 16rpx;

          .price {
            color: #8d8d8d;
            font-weight: 500;
            font-size: 24rpx;
          }

          .sold {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
}

.nut-tab-pane {
  padding: 12rpx;
}
</style>
